<template>
  <div class="panel">
    <div class="panel-body">
      <scroll-view simple ref="scrollView">
        <ul>
          <li v-for="it in messageList" :key="it.id" :class="it.isMe && 'is-me'">
            <template v-if="!it.isMe">
              <div class="user">
                <el-avatar :size="50" :src="$V.staticBaseURL + it.receiver.avatar" @error="errorHandler">
                  <img :src="require(`@/assets/qq/${it.receiver.randomAvatarIndex}.jpeg`)" alt />
                </el-avatar>
                <cite>
                  <span>{{it.receiver.nickName}}</span>
                  <i>{{it.createdAt}}</i>
                </cite>
              </div>
              <div class="text">
                <span>{{it.text}}</span>
              </div>
            </template>
            <template v-else>
              <div class="user">
                <el-avatar :size="50" :src="$V.staticBaseURL + it.sender.avatar" @error="errorHandler">
                  <img :src="require(`@/assets/qq/${it.sender.randomAvatarIndex}.jpeg`)" alt />
                </el-avatar>
                <cite>
                  <i>{{it.createdAt}}</i>
                  <span>我</span>
                </cite>
              </div>
              <div class="text">
                <span>{{it.text}}</span>
              </div>
            </template>
          </li>
        </ul>
      </scroll-view>
    </div>
    <div class="panel-footer">
      <div class="panel-tool">
        <span>😀</span>
        <span>聊天记录</span>
      </div>
      <div class="panel-input">
        <el-input type="textarea" :rows="4" v-model="text" />
      </div>
      <div class="panel-control">
        <el-button type="success" @click="handleClose">关闭</el-button>
        <el-button type="success" @click="handleSend">发送</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  inject: ['chat'],
  data () {
    return {
      text: ''
    }
  },
  computed: {
    messageList: {
      get () {
        if (!this.chat.currentUser) {
          return []
        }

        let from = this.chat.account.id
        let to = this.chat.currentUser.id
        let chatId = [from, to].sort().join('_')

        return this.chat.chatMessageMap[chatId].messageList
      }
    }
  },
  methods: {
    errorHandler () {
      return true
    },
    handleSend () {
      let trimedText = this.text.trim()
      if (trimedText) {
        this.chat.$emit('sendMessage', trimedText)
        this.text = ''
      }
    },
    handleClose () {
      this.chat.$emit('chat.close')
    }
  },
  updated () {
    this.$refs.scrollView.scrollToBottom()
  },
  mounted () {
    this.$nextTick(() => {
      this.$refs.scrollView.scrollToBottom()
    })
  }
}
</script>

<style lang="scss" scoped>
.panel-body {
  height: 262px;
  overflow-x: hidden;
  overflow-y: auto;
  ul {
    list-style: none;
    padding: 15px;
    li {
      padding-left: 50px;
      position: relative;
      min-height: 60px;
      margin-bottom: 10px;
      &:last-child {
        margin-bottom: 0;
      }
      &.is-me {
        padding-right: 50px;
        padding-left: 0;
        text-align: right;
        > .user {
          right: 0;
          cite {
            right: 60px;
            left: auto;
          }
        }
        .text {
          background: #5fb878;
          color: #fff;
          text-align: left;
          &::after {
            right: -10px;
            left: auto;
            border-color: #5fb878 transparent transparent;
          }
        }
      }
      > .user {
        position: absolute;
        left: 0;
        > img {
          width: 40px;
          height: 40px;
          border-radius: 50%;
        }
        cite {
          width: 500px;
          position: absolute;
          top: 10px;
          left: 60px;
          color: #999;
          font-style: normal;
          font-size: 12px;
          font-style: normal;
          > i {
            font-style: normal;
          }
        }
      }
      > .text {
        display: inline-block;
        position: relative;
        line-height: 22px;
        margin-top: 35px;
        padding: 8px 15px;
        background-color: #e2e2e2;
        border-radius: 3px;
        color: #333;
        word-break: break-all;
        &::after {
          content: "";
          position: absolute;
          left: -10px;
          top: 13px;
          width: 0;
          height: 0;
          border-style: solid dashed dashed;
          border-color: #e2e2e2 transparent transparent;
          overflow: hidden;
          border-width: 10px;
        }
      }
    }
  }
}
.panel-footer {
  >>> .el-textarea__inner {
    background: transparent;
    border: none;
    color: #000;
    padding: 5px 0;
  }
  .panel-control {
    text-align: right;
    button {
      border-radius: 4px;
      background-color: #5fb878;
      border: none;
      padding: 9px 20px;
      &:hover {
        background-color: mix(#fff, #5fb878, 10%);
      }
    }
  }
}
</style>
